<!DOCTYPE html>
<html lang="zh">
<head>
    <:include file="../../common/css.html" title="多选组件"/>
</head>
<body class="pear-container">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    开发环境
                </div>
                <div class="layui-card-body">
                    Select 应用于 多选 场景
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<link href="/assets/component/pear/css/pear.css" rel="stylesheet"/>
 并
<script src="/assets/component/layui/layui.js"></script>
 并
<script src="/assets/component/pear/pear.js"></script>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    默认主题
                </div>
                <div class="layui-card-body">
                    <select name="city5" xm-select="select5" xm-select-skin="default">
                        <option value="1">北京</option>
                        <option value="2" selected="selected">上海</option>
                        <option value="3">广州</option>
                        <option value="4" selected="selected">深圳</option>
                        <option value="5">天津</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<select name="demo1" xm-selects="demo1" xm-select-skin="default">
    <option value="1">北京</option>
    <option value="2" selected="selected">上海</option>
    <option value="3">广州</option>
    <option value="4" selected="selected">深圳</option>
    <option value="5">天津</option>
</select>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    绿色主题
                </div>
                <div class="layui-card-body">
                    <select name="city1" xm-select="select1">
                        <option value="1">北京</option>
                        <option value="2" selected="selected">上海</option>
                        <option value="3">广州</option>
                        <option value="4" selected="selected">深圳</option>
                        <option value="5">天津</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<select name="demo2" xm-select="demo2">
    <option value="1">北京</option>
    <option value="2" selected="selected">上海</option>
    <option value="3">广州</option>
    <option value="4" selected="selected">深圳</option>
    <option value="5">天津</option>
</select>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    通用主题
                </div>
                <div class="layui-card-body">
                    <select name="city2" xm-select="select2" xm-select-skin="normal">
                        <option value="1">北京</option>
                        <option value="2" selected="selected">上海</option>
                        <option value="3">广州</option>
                        <option value="4" selected="selected">深圳</option>
                        <option value="5">天津</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<select name="demo3" xm-select="demo3" xm-select-skin="normal">
    <option value="1">北京</option>
    <option value="2" selected="selected">上海</option>
    <option value="3">广州</option>
    <option value="4" selected="selected">深圳</option>
    <option value="5">天津</option>
</select>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    警告主题
                </div>
                <div class="layui-card-body">
                    <select name="city3" xm-select="select3" xm-select-skin="warm">
                        <option value="1">北京</option>
                        <option value="2" selected="selected">上海</option>
                        <option value="3">广州</option>
                        <option value="4" selected="selected">深圳</option>
                        <option value="5">天津</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<select name="demo4" xm-select="demo4" xm-select-skin="warm">
    <option value="1">北京</option>
    <option value="2" selected="selected">上海</option>
    <option value="3">广州</option>
    <option value="4" selected="selected">深圳</option>
    <option value="5">天津</option>
</select>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">
                    危险主题
                </div>
                <div class="layui-card-body">
                    <select name="city4" xm-select="select4" xm-select-skin="danger">
                        <option value="1">北京</option>
                        <option value="2" selected="selected">上海</option>
                        <option value="3">广州</option>
                        <option value="4" selected="selected">深圳</option>
                        <option value="5">天津</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-col-md12">
            <div class="layui-collapse">
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">显示代码</h2>
                    <div class="layui-colla-content">
                        <pre class="layui-code" lay-encode="true">
<select name="demo5" xm-select="demo5" xm-select-skin="danger">
    <option value="1">北京</option>
    <option value="2" selected="selected">上海</option>
    <option value="3">广州</option>
    <option value="4" selected="selected">深圳</option>
    <option value="5">天津</option>
</select>
                        </pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 依 赖 脚 本 -->
    <:include file="../../common/js.html" />
    <script>
        layui.use(['select', 'code', 'element'], function () {
            let select = layui.select;

            layui.code({ encode: true  });
        });
    </script>
</body>
</html>
